import React from 'react';
import './applicationCash.less';
import { Link } from 'react-router';
import { Breadcrumb, Row, Col, Input, DatePicker, Select, Button, Table, Modal, Pagination, message, Popconfirm, TreeSelect } from 'antd';
import moment from 'moment';
import $ from 'jquery';
import Config from '../../common/config';

const { RangePicker } = DatePicker;
const Option = Select.Option;
const config = new Config();
const InputGroup = Input.Group;
const token = sessionStorage.getItem('token');
class applicationCash extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [], // 数据
            pageindex: 1, // 当前页
            pagesize: 10, // 每页显示的条数
            total: 0, // 总数

            phone: '',//提现申请id
            moneyone: '',//金额开始
            moneytwo: '',//金额结束
            userId: '',//用户id
            username: '',//用户名字
            requesttimeone: '',//申请时间开始
            requesttimetwo: '',//申请时间结束
            state: '',//提现状态
            options: [],//提现申请来源
            sources: undefined,//选择科室
            listdataone: {},//选中当前的激活行
            visible: false, //弹出框
        }
        this.onChangePage = this.onChangePage.bind(this)
        this.InputPhone = this.InputPhone.bind(this)
        this.changeDepartment = this.changeDepartment.bind(this)
        this.changeStartAmount = this.changeStartAmount.bind(this)
        this.changeEndAmount = this.changeEndAmount.bind(this)
        this.InputUserId = this.InputUserId.bind(this)
        this.InputUsername = this.InputUsername.bind(this)
        this.changeOrderState = this.changeOrderState.bind(this)

    }

    componentDidMount() {
        const state = this.props.location.state
        if (state) {
            this.setState({
                pageindex: state.pageindex,
                pagesize: state.pagesize,
                phone: state.phone,
                moneyone: state.moneyone,
                moneytwo: state.moneytwo,
                userId: state.userId,
                username: state.username,
                requesttimeone: state.requesttimeone,
                requesttimetwo: state.requesttimetwo,
                sources: state.sources,
                state: state.state
            }, () => {
                this.getData()
                this.Access()
            })
        } else {
            this.getData()
            this.Access()
        }
    }

    // 获取提现申请表
    getData() {
        const { pageindex, pagesize, phone, moneyone, moneytwo, userId, username, requesttimeone, requesttimetwo, sources, state } = this.state
        $.ajax({
            url: `${config.applicationCash}/manage/withdrawallist`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data: {
                pageindex,
                pagesize,
                phone,
                moneyone,
                moneytwo,
                userId,
                username,
                requesttimeone,
                requesttimetwo,
                sources,
                state
            },
            success: (res) => {
                console.log('获取提现申请表', res)
                if (res.code === 200 && res.data.length > 0) {
                    res.data[0].forEach((item, index) => {
                        item.key = index + 1 + (this.state.pageindex - 1) * this.state.pagesize;
                    })

                    this.setState({
                        total: res.count[0].num,
                        data: res.data[0]
                    })
                } else {
                    this.setState({
                        total: 0,
                        data: []
                    })
                }
            }
        });
    }

    // 表头
    getColumns() {
        return [
            {
                title: '提现申请ID',
                width: '7%',
                dataIndex: 'id',
            },
            {
                title: '申请来源',
                width: '7%',
                render: (record, text) => {
                    return <span>在线问诊</span>
                }
            },
            {
                title: '申请时间',
                width: '7%',
                dataIndex: 'createdAt',
                render: (text, record) => {
                    if (text) {
                        return moment(text).format('YYYY-MM-DD HH:mm');
                    } else {
                        return ``
                    }

                }
            },
            {
                title: '金额(元)',
                width: '7%',
                render: (record, text) => {
                    return <span style={{ color: '#ff0000' }}>{text.money}</span>
                }
            },
            {
                title: '用户ID',
                width: '7%',
                dataIndex: 'doctorId',
            },
            {
                title: '姓名',
                width: '7%',
                dataIndex: 'name'
            },
            {
                title: '可用余额(元)',
                width: '7%',
                dataIndex: 'sum'
            },
            {
                title: '银行',
                width: '7%',
                dataIndex: 'banks'
            },
            {
                title: '支行',
                width: '7%',
                dataIndex: 'subbranch'
            },
            {
                title: '银行卡号',
                width: '8%',
                dataIndex: 'account'
            },
            {
                title: '状态',
                width: '7%',
                dataIndex: 'state',
                render: (record) => {
                    let text = "";
                    switch (record) {
                        case 1:
                            text = '申请中 ';
                            break;
                        case 2:
                            text = '已转款';
                            break;
                        case 3:
                            text = '提现失败';
                            break;
                    }
                    return text;
                }
            },
            {
                title: '处理时间',
                width: '8%',
                dataIndex: 'disposetime',
                render: (text, record) => {
                    if (text) {
                        return moment(text).format('YYYY-MM-DD HH:mm');
                    } else {
                        return ``
                    }

                }
            },
            {
                title: '审核人',
                width: '7%',
                dataIndex: 'auditor'
            },
            {
                title: '操作',
                width: '7%',
                render: (record, text) => {
                    if (record.state == 1) {
                        return (<div>
                            <Button onClick={this.showModal.bind(this, record)}>处理</Button>
                        </div>)
                    } else {
                        return (null)
                    }

                }
            },
        ];
    }

    // 输入提现申请id搜索值
    InputPhone(e) {
        console.log(e.target.value)
        this.setState({
            phone: e.target.value
        });
    }

    // 输入金额开始
    changeStartAmount(e) {
        console.log(e.target.value)
        this.setState({
            moneyone: e.target.value
        });
    }

    // 输入金额结束
    changeEndAmount(e) {
        console.log(e.target.value)
        this.setState({
            moneytwo: e.target.value
        });
    }

    // 输入提现申请id搜索值
    InputUserId(e) {
        console.log(e.target.value)
        this.setState({
            userId: e.target.value
        });
    }

    // 输入名字
    InputUsername(e) {
        console.log(e.target.value)
        this.setState({
            username: e.target.value
        });
    }

    //生日禁用
    disabledDate1(val) {
        if (val) {
            return val.valueOf() > Date.now();
        } else {
            return false;
        }
    }

    //选择申请来源
    changeDepartment(value) {
        console.log(value)
        this.setState({
            sources: value
        });
    }

    //日期筛选方法
    changeDate(date, dateStr) {
        console.log('feefe', date, dateStr)
        this.setState({
            dateStr,
            date,
        });
        this.setState({
            pageindex: 1,
            requesttimeone: dateStr[0],
            requesttimetwo: dateStr[1]
        });
    }

    //选择提现状态
    changeOrderState(value) {
        console.log(value)
        this.setState({
            state: value
        });
    }

    //选择
    changeSex(value) {
        this.setState({
            sex: value
        });
    }

    showModal(record) {
        console.log(record)
        this.setState({
            visible: true,
            listdataone: record
        });
    }
    handleOk(e, r) {
        console.log(this.state.listdataone)
        $.ajax({
            url: `${config.applicationCash}/manage/updaterequest`,
            type: 'post',
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data: {
                doctorId: this.state.listdataone.doctorId,
                withid: this.state.listdataone.id,
                state: 2
            },
            success: (res) => {
                console.log('修改状态', res)
                if (res.code === 200) {
                    this.setState({
                        visible: false,
                    }, () => {
                        this.getData();
                    });
                }
            }
        });

    }
    handleCancel(e) {
        this.setState({
            visible: false,
        });
    }

    // 搜索/清空
    filterOrders(key) {
        if (key) {
            // 搜索
            this.setState({
                pageindex: 1
            }, () => {
                this.getData();
            });
        } else {
            // 清空
            this.setState({
                pageindex: 1,
                phone: '',
                userId: '',
                username: '',
                sources: undefined,
                state: undefined,
                moneyone: '',
                moneytwo: '',
                requesttimeone: '',
                requesttimetwo: '',
                date: ['', '']
            }, () => {
                this.getData();
            });
        }
    }

    // 切换分页
    onChangePage(pageindex) {
        this.setState({
            pageindex
        }, () => {
            this.getData();
        });
    }

    // 获取提现申请来源
    Access() {
        $.ajax({
            url: `${config.applicationCash}/manage/getwithdrawsources`,
            type: 'get',
            headers: {
                'Authorization': 'Bearer ' + sessionStorage.getItem('token'),
            },
            data: {},
            success: (res) => {
                console.log('获取提现申请来源', res)
                if (res.code === 200) {
                    this.setState({
                        options: res.data,
                    })
                }
            }
        });
    }
    render() {
        const columns = this.getColumns();
        return (
            <div className='contentBox clearfix'>
                <div className="member-content-Search">
                    <div className='breadcrumb'>
                        <Breadcrumb separator=">">
                            <Breadcrumb.Item>支付中心</Breadcrumb.Item>
                            <Breadcrumb.Item>提现申请</Breadcrumb.Item>
                        </Breadcrumb>
                    </div>
                    <div>
                        <div className="member-content-Search" style={{ marginBottom: 20 }}>
                            <div className='addetd' style={{ zIndex: 1 }}>
                                <Input addonBefore='提现申请ID' placeholder="请输入" value={this.state.phone} onChange={this.InputPhone} />
                            </div>
                            <div className='addetd addetd-a addetd-kk dsoyy_op'>
                                <InputGroup compact>
                                    <span className='chengge-a cccs_tyt'>金额</span>
                                    <Input size="large" className='xiangsikangsit' value={this.state.moneyone} onChange={this.changeStartAmount} />
                                </InputGroup>
                            </div>
                            <div className='addetd addetd-a addetd-kk dsoyy_op1' >
                                <InputGroup compact>
                                    <span className='limiaossi'>~</span>
                                    <Input size="large" className='xiangsikangsit' value={this.state.moneytwo} onChange={this.changeEndAmount} />
                                </InputGroup>
                            </div>

                            <div className='addetd' style={{ zIndex: 1 }}>
                                <Input addonBefore='用户ID' placeholder="请输入" value={this.state.userId} onChange={this.InputUserId} />
                            </div>
                            <div className='addetd' style={{ zIndex: 1 }}>
                                <Input addonBefore='姓名' placeholder="请输入" value={this.state.username} onChange={this.InputUsername} />
                            </div>
                        </div>
                        <div className="member-content-Search" style={{ marginBottom: 20 }}>
                            <div className='addetd addetd-a addetd-kk'>
                                <InputGroup compact>
                                    <span className='chengge-a'>申请来源</span>
                                    <Select value={this.state.sources} placeholder='全部' onChange={this.changeDepartment.bind(this)} style={{ width: 120, marginLeft: 20 }}>
                                        {
                                            this.state.options.length ? this.state.options.map((item, i) => (
                                                <Option value={`${item.sources}`} key={i}>

                                                    {(item.sources == 1) && ('在线问诊')}

                                                </Option>
                                            ))
                                                :
                                                ''
                                        }
                                    </Select>
                                </InputGroup>
                            </div>
                            <div className='addetd addetd1 addetd2'>
                                <Input className='addetd-a-r' addonBefore="申请时间" value={this.state.Inkey} onChange={(e) => this.changeInkey(e)} />
                                <RangePicker
                                    onChange={this.changeDate.bind(this)}
                                    format='YYYY-MM-DD'
                                    value={this.state.date}
                                    disabledDate={(val) => this.disabledDate1(val)}
                                />
                            </div>
                            <div className='addetd addetd-a addetd-kk'>
                                <InputGroup compact>
                                    <span className='chengge-a'>提现状态</span>
                                    <Select value={this.state.state} onChange={this.changeOrderState} placeholder='全部' allowClear style={{ width: 120, marginLeft: 20 }}>
                                        <Option value=''>全部</Option>
                                        <Option value='1'>申请中</Option>
                                        <Option value='2'>已转款</Option>
                                    </Select>
                                </InputGroup>
                            </div>
                            <Button className='ant-btn-primary' icon='search' onClick={this.filterOrders.bind(this, 1)}>搜索</Button>
                            <Button className='ant-btn-primary' icon='sync' onClick={this.filterOrders.bind(this, 0)}>重置</Button>
                        </div>
                    </div>
                </div>
                <div className='allgoods-table clearfix'>
                    <Table columns={columns} dataSource={this.state.data} pagination={false} bordered />
                </div>
                <Modal title="提示" width={420} visible={this.state.visible}
                    onOk={this.handleOk.bind(this)} onCancel={this.handleCancel.bind(this)}
                >
                    <p className='tishitht'>您确定通过申请么？</p>

                </Modal>
                <div className='goods-label-let clearfix'>
                    <div className="floor-ppagi">
                        {
                            this.state.total == 0 ?
                                <p className="floor-ppagip">
                                    共{this.state.total}条记录
              </p> :
                                <p className="floor-ppagip">
                                    当前显示
                {this.state.pagesize * (this.state.pageindex - 1) + 1}—
                {this.state.pagesize * this.state.pageindex < this.state.total ? this.state.pagesize * this.state.pageindex : this.state.total}条记录，
                共{this.state.total}条记录
              </p>
                        }
                        <Pagination current={this.state.pageindex} total={this.state.total || 1} defaultPageSize={this.state.pagesize} onChange={this.onChangePage.bind(this)} />
                    </div>
                </div>
            </div>
        )
    }
}

export default applicationCash;
